<template>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="next1" >
        <!--房产信息页-->
        <el-tab-pane label="合同信息" name="first" disabled>
         房产信息
          <el-button type="primary" @click="getList()" path>选择房产</el-button><br>
          <hr>
          <!--合同新题from-->
        <el-form :inline="true" :model="ShouruleForm" :rules="rules" ref="ShouruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="小区名称" prop="premiseName"  >
              <el-input v-model="ShouruleForm.premiseName" :disabled="true" placeholder="请输入小区名"></el-input>
            </el-form-item>
          <el-form-item label="房产信息" prop="houseName" >
            <el-input v-model="ShouruleForm.houseName" :disabled="true" placeholder="请输入房产信息"></el-input>
          </el-form-item>
          <br>
            <el-form-item label="所有权类型" prop="houseType">
              <el-select v-model="ShouruleForm.houseType" placeholder="请选择所有权类型">
                <el-option label="国有房产" value="1" />
                <el-option label="直管房产" value="2" />
                <el-option label="自管房产" value="3" />
                <el-option label="军队房产" value="4" />
                <el-option label="集体所有房产" value="5" />
                <el-option label="私有(自由)房产" value="6" />
                <el-option label="港、澳、台投资房产" value="7" />
                <el-option label="涉外房产" value="8" />
                <el-option label="其他房产" value="9" />
              </el-select>
            </el-form-item>
          <el-form-item label="房产证书编号" prop="houseZsNo" >
          <el-input v-model="ShouruleForm.houseZsNo" placeholder="请输入房产证书编号"></el-input>
        </el-form-item>
          <br>
          <el-form-item label="产权地址" prop="cqAddress" >
            <el-input v-model="ShouruleForm.cqAddress" placeholder="请输入产权地址"></el-input>
          </el-form-item>
          <br>
          业主信息
          <hr>
          <el-form-item label="业主姓名" prop="ownerName" >
            <el-input v-model="ShouruleForm.ownerName" placeholder="请输入业主姓名"></el-input>
            <el-checkbox v-model="checked" @change="tongbu">是否为签约人</el-checkbox>
          </el-form-item>
          <el-form-item label="" >
            <el-select  placeholder="证件类型类型" clearable size="small" style="width: 100px">
              <el-option value="身份证" label="身份证"></el-option>
              <el-option value="护照" label="护照"></el-option>
              <el-option value="台胞证" label="台胞证"></el-option>
              <el-option value="港澳通行证" label="港澳通行证"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业主身份证号" prop="ownerIdCard" >
            <el-input v-model="ShouruleForm.ownerIdCard" placeholder="请输入业主身份证号"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="业主手机号" prop="ownerMobile" >
            <el-input v-model="ShouruleForm.ownerMobile" placeholder="请输入业主手机号"></el-input>
          </el-form-item>
          <el-form-item label="业主联系地址" prop="ownerContactAddress" >
            <el-input v-model="ShouruleForm.ownerContactAddress" placeholder="请输入业主联系地址"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="签约人" prop="signUserName" >
            <el-input v-model="ShouruleForm.signUserName" placeholder="请输入签约人"></el-input>
          </el-form-item>
          <el-form-item label="" >
            <el-select  placeholder="证件类型类型" clearable size="small" style="width: 100px">
              <el-option value="身份证" label="身份证"></el-option>
              <el-option value="护照" label="护照"></el-option>
              <el-option value="台胞证" label="台胞证"></el-option>
              <el-option value="港澳通行证" label="港澳通行证"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="签约人证件号" prop="signUserIdCard" >
            <el-input v-model="ShouruleForm.signUserIdCard" placeholder="请输入签约人证件号"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="签约人手机号" prop="signUserMobile" >
            <el-input v-model="ShouruleForm.signUserMobile" placeholder="请输入签约人手机号"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系电话" prop="signUserEmergencyPhone" >
            <el-input v-model="ShouruleForm.signUserEmergencyPhone" placeholder="请输入紧急联系电话"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="账户类型">
            <el-select v-model="ShouruleForm.desc" placeholder="请选择账户类型" @change="getRegionAndBank()">
              <el-option label="请选择" value=""></el-option>
              <el-option label="对公账户" value="H"></el-option>
              <el-option label="对私账户" value="F"></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="开户省份" v-if="ShouruleForm.desc !=''">
            <el-select v-model="ShouruleForm.bankAccountProvince" placeholder="请选择">
              <el-option
                v-for="item in RegionFrom"
                :key="item.regionId"
                :label="item.regionName"
                :value="item.regionId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="银行名称" v-if="ShouruleForm.desc !=''">
              <el-select v-model="ShouruleForm.bankName" placeholder="请选择" @change="al(ShouruleForm.bankId)">
                <el-option
                  v-for="item in BamkFrom"
                  :key="item.bankId"
                  :label="item.bankName"
                  :value="item.bankName">
                </el-option>
              </el-select>
          </el-form-item>
          <br>
          <el-form-item label="开户支行" v-if="ShouruleForm.desc != 'F' & ShouruleForm.desc !=''">
            <el-input v-model="ShouruleForm.bankOpen" placeholder="请输入开户支行"></el-input>
          </el-form-item>
          <el-form-item label="联行行号"   v-if="ShouruleForm.desc != 'F' & ShouruleForm.desc !=''">
            <el-input v-model="ShouruleForm.bankBranchCodeLh" placeholder="请输入联行行号"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="账号姓名"  v-if="ShouruleForm.desc !=''">
            <el-input v-model="ShouruleForm.accountName" placeholder="请输入账号姓名"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号"  v-if="ShouruleForm.desc !=''">
            <el-input v-model="ShouruleForm.bankCardNumber" placeholder="请输入银行卡号"></el-input>
          </el-form-item>
          <br>
          租约信息
          <hr>
          <el-form-item label="租约期限" prop="leaseStartTime">
            <el-date-picker clearable size="small"
                            v-model="ShouruleForm.leaseStartTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择租约期限">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="至" prop="leaseEndTime">
            <el-date-picker clearable size="small"
                            v-model="ShouruleForm.leaseEndTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择租约期限">
            </el-date-picker>
          </el-form-item>
          <el-button @click="one">一年</el-button>
          <el-button @click="two">二年</el-button>
          <el-button @click="three">三年</el-button>
          <el-button @click="four">四年</el-button>
          <el-button @click="five">五年</el-button>
          <br>
          <el-form-item label="租金" prop="monthRent" >
            <el-input v-model="ShouruleForm.monthRent" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="房产押金" prop="depositMoney" >
            <el-input v-model="ShouruleForm.depositMoney" placeholder="请输入"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="支付方式" prop="depositType">
            押
            <el-select v-model="ShouruleForm.depositType" >
              <el-option label="0" value="0"></el-option>
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
            </el-select>
            付
            <el-select v-model="ShouruleForm.paymentType"  >
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
              <el-option label="6" value="6"></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="ShouruleForm.reserve3"></el-input>
          </el-form-item>
          </el-form>

          <el-button type="primary" path>取消</el-button>
          <el-button type="primary" @click="next1('ShouruleForm')">下一步</el-button>
        </el-tab-pane>


        <!--附件页-->
        <el-tab-pane label="附件" name="second" disabled>
          <h1>房产证照片</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview1"
            :on-remove="handleRemove1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1">
            <img width="100%" :src="dialogImageUrl1" alt="">
          </el-dialog>
          <h1>收房合同</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview2"
            :on-remove="handleRemove2">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
          <h1>业主身份证明</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview3"
            :on-remove="handleRemove3">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible3">
            <img width="100%" :src="dialogImageUrl3" alt="">
          </el-dialog>
          <h1>代理人身份证明</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview4"
            :on-remove="handleRemove4">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible4">
            <img width="100%" :src="dialogImageUrl4" alt="">
          </el-dialog>
          <h1>银行卡信息</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview5"
            :on-remove="handleRemove5">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible5">
            <img width="100%" :src="dialogImageUrl5" alt="">
          </el-dialog>
          <h1>委托书</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview6"
            :on-remove="handleRemove6">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible6">
            <img width="100%" :src="dialogImageUrl6" alt="">
          </el-dialog>
          <h1>物业交割单</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview7"
            :on-remove="handleRemove7">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible7">
            <img width="100%" :src="dialogImageUrl7" alt="">
          </el-dialog>
          <h1>其他</h1>
          <hr>
          <el-upload
            action="http://localhost/dev-api/home/contract/addpic"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview8"
            :on-remove="handleRemove8">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible8">
            <img width="100%" :src="dialogImageUrl8" alt="">
          </el-dialog>
          <br>
          <el-button type="primary" @click="shang1()">上一步</el-button>
          <el-button type="primary" @click="tiaoguo()">跳过</el-button>
          <el-button type="primary" @click="next2('ShouruleForm')">下一步</el-button>
        </el-tab-pane>


        <!--付款单页-->
        <el-tab-pane label="付款单" name="third" disabled>
          <h1>付款单</h1>
          <hr>

          <!--付款单表单-->
          <el-table
            :data="ShouruleForm.tableData"
            style="width: 100%"
          >
            <el-table-column
              prop="payNumber"
              label="序号"
              width="180">

            </el-table-column> <template slot-scope="scope">
            {{scope.$index}}
            <span v-if="scope.$index==0 || scope.$index==1" style="color: red">(第一期)</span>
          </template>
            <el-table-column
              prop="paymentDaysBegin"
              label="应付日期"
              width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paymentDaysBegin"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="金额">
              <template slot-scope="scope">
                <el-input v-model="scope.row.paymentAmount"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="tax"
              label="租税">
              <template slot-scope="scope">
                <el-input v-model="scope.row.tax"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="skStatus"
              label="付款状态">
              <template slot-scope="scope">
                <el-radio v-model="scope.row.skStatus" label="2">已付</el-radio>
                <el-radio v-model="scope.row.skStatus" label="1">未付</el-radio>
                <span v-for=" s in paystasus" v-if="scope.row.skStatus==s.id">{{s.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="房产租金周期"
              prop="date">
              <template slot-scope="scope">
                {{scope.row.payableDate}}至{{scope.row.paymentDaysEnd}}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="fkdxg1(scope.row.payNumber)" type="text" size="small" >修改</el-button>
                <el-button @click="fkdxg2(scope.row.payNumber)"  type="text" size="small">取消修改</el-button>
              </template>
            </el-table-column>
          </el-table>





          <br>
          <el-button type="primary" @click="shang2()">上一步</el-button>
          <el-button type="primary" @click="baocun('ShouruleForm')">保存</el-button>
        </el-tab-pane>
      </el-tabs>






      <!--房源查询-->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!--fangfrom-->
        <el-form :inline="true" :model="HouseDto" class="demo-form-inline">
          <el-form-item label="小区名称">
            <el-input v-model="HouseDto.roomName" placeholder="输入小区名称"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="HouseDto.leaseType" placeholder="请输入类型">
              <el-option label="请选择" value=""></el-option>
              <el-option label="整租（分散式）" value="0"></el-option>
              <el-option label="合租(分散式)" value="1"></el-option>
              <el-option label="公寓（集中式）" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
        <!--房源查询列表-->
        <el-table
          :data="tableData1"
          style="width: 1000px"
        >
          <el-table-column
          prop="premiseName"
          label="房产信息"
          width="180"
          >
        </el-table-column>
          <el-table-column
            prop="roomName"
            label=""
            width="180">
          </el-table-column>
          <el-table-column
            prop="roomHall"
            label="居室"
            width="180">
          </el-table-column>
          <el-table-column
            prop="leaseType"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row.premiseName,scope.row.roomName)" type="text" size="small">选定</el-button>
            </template>
          </el-table-column>
        </el-table>





      </el-dialog>

    </div>
</template>





<script>
  import {xzfcContract,bankContract,regionContract,scfkjhContract,baocunContract} from "../../../api/home/contract";

  export default {
        name: "index",
        data() {
            return {

              /*修改状态*/
              xgzt:false,
              /*是否同步*/
              checked:false,

              //付款状态 1:未收款 2：已收款 3：已中止
              paystasus:[
                {id:1,name:"未收款"},{id:2,name:"已收款"},{id:3,name:"已中止"}
              ],


              /*图片*/
              /*房产证照片1*/
              dialogImageUrl1: '',
              dialogVisible1: false,
              /*收房合同2*/
              dialogImageUrl2: '',
              dialogVisible2: false,
              /*业主身份证明3*/
              dialogImageUrl3: '',
              dialogVisible3: false,
              /*代理人身份证明4*/
              dialogImageUrl4: '',
              dialogVisible4: false,
              /*银行卡信息5*/
              dialogImageUrl5: '',
              dialogVisible5: false,
              /*委托书6*/
              dialogImageUrl6: '',
              dialogVisible6: false,
              /*物业交割单7*/
              dialogImageUrl7: '',
              dialogVisible7: false,
              /*其他8*/
              dialogImageUrl8: '',
              dialogVisible8: false,


              //对话框
              dialogVisible: false,
              //页面跳转
              activeName:"first",
              //收房合同查询
              tableData1:[],
              /*房源的模糊查询*/
              HouseDto:{
                pageNum: 1,
                pageSize: 10,
                roomName:null,
                leaseType:null,
              },
              /*银行实体*/
              BamkFrom:[],
              /*省级实体*/
              RegionFrom:[],
              /*时间addDate*/
              updateTime:null,
              /*合同from实体*/
              ShouruleForm:{
                /*房产*/
                /*小区名称*/
                premiseName:null,
                /*房产信息*/
                houseName:null,
                /*所有权类型*/
                houseType:null,
                /*房产证书编号*/
                houseZsNo:null,
                /*产权地址*/
                cqAddress:null,
                /*业主*/
                /*业主姓名*/
                ownerName:null,
                /*是否为签约人*/
                signWithOwner:null,
                /*业主证件号码*/
                ownerIdCard:null,
                /*业主手机号*/
                ownerMobile:null,
                /** 业主联系地址 */
                ownerContactAddress:null,
                /** 签约人(甲方) */
                signUserName:null,
                /** 签约人证件号（身份证） */
                 signUserIdCard:null,
                /** 签约人手机号 */
                signUserMobile:null,
                /** 紧急联系电话 */
                signUserEmergencyPhone:null,
                /*开户行省id*/
                bankAccountProvince:null,
                /*银行名称*/
                bankName:null,
                /*银行id*/
                bankId:null,
                /*开户行*/
                bankOpen:null,
                /*联行行号*/
                bankBranchCodeLh:null,
                /*账户名称*/
                accountName:null,
                /*银行卡号*/
                bankCardNumber:null,
                /*租约信息*/
                /*租约期限开始时间*/
                leaseStartTime:null,
                /*租约期限结束时间*/
                leaseEndTime:null,
                /*收房月租金*/
                monthRent:null,
                /*房产押金*/
                depositMoney:null,
                /*支付方式押几*/
                depositType:null,
                /*支付方式付几*/
                paymentType:null,
                /*备注*/
                reserve3:null,
                /*付款单表*/
                tableData:[],
              },
              /*合同from实体的校验*/
              rules: {
                premiseName: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                houseName: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                houseType: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                houseZsNo: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                cqAddress : [
                   { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                 ],
                ownerName: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                ownerIdCard: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                ownerMobile: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                ownerContactAddress: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                signUserName: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                signUserIdCard: [
                    { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                  ],
                signUserMobile: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                signUserEmergencyPhone: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                leaseStartTime: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                leaseEndTime: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                depositMoney: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                monthRent: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                depositType: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ],
                paymentType: [
                  { required: true, message: '不能为空，请正确输入', trigger: 'blur' },
                ]
              }

            }
        },

                methods: {
                  /*单行*/
                  danhang(){
                    alert(1)
                  },

                  /*保存*/
                  baocun(){
                    baocunContract(this.ShouruleForm).then(response => {
                    });
                  },

                  fz(){

                    for (let i = 0; i <this.tableData.length ; i++) {
                      if (this.tableData[i].skStatus=null){
                        this.tableData[i].skStatus="1"
                      }
                    }
                    },

          /*付款单修改*/
                  fkdxg1(id){
                    alert(id)
                    this.xgzt=true;
                  },
                  /*付款单取消修改*/
                  fkdxg2(id){
                    alert(id)
                  },

          /*生成合同计划*/
                  scfkjh(){
                    scfkjhContract(this.ShouruleForm).then(response => {
                      console.log(JSON.stringify(response))
                      this.ShouruleForm.tableData=response.payMentPlanList;
                      this.fz();
                    });
                  },
          /*附件*/
                  /*图片返回*/
                  /*1*/
                  handleRemove1(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview1(file) {
                    this.dialogImageUrl1 = file.url;
                    this.dialogVisible1 = true;
                  },
                  /*2*/
                  handleRemove2(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview2(file) {
                    this.dialogImageUrl2 = file.url;
                    this.dialogVisible2 = true;
                  },
                  /*3*/
                  handleRemove3(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview3(file) {
                    this.dialogImageUrl3 = file.url;
                    this.dialogVisible3 = true;
                  },
                  /*4*/
                  handleRemove4(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview4(file) {
                    this.dialogImageUrl4 = file.url;
                    this.dialogVisible4 = true;
                  },
                  /*5*/
                  handleRemove5(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview5(file) {
                    this.dialogImageUrl5 = file.url;
                    this.dialogVisible5= true;
                  },
                  /*6*/
                  handleRemove6(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview6(file) {
                    this.dialogImageUrl6 = file.url;
                    this.dialogVisible6 = true;
                  },
                  /*7*/
                  handleRemove7(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview7(file) {
                    this.dialogImageUrl7 = file.url;
                    this.dialogVisible7 = true;
                  },
                  /*8*/
                  handleRemove8(file, fileList) {
                    console.log(file, fileList);
                  },
                  handlePictureCardPreview8(file) {
                    this.dialogImageUrl8 = file.url;
                    this.dialogVisible8 = true;
                  },



          /*合同信息*/
                  /*查询银行和地区*/
                  getRegionAndBank(){
                    this.getBank();
                    this.getRegin();
                  },
                  /*查询银行*/
                  getBank(){
                    bankContract({}).then(response => {
                      this.BamkFrom=response.rows;
                    });
                  },
                  /*查询地区*/
                  getRegin(){
                    regionContract({}).then(response => {
                      this.RegionFrom=response.rows;
                    });
                  },
                  /*合同的重置*/
                  resetForm(formName) {
                    this.$refs[formName].resetFields();
                  },
                 /*房源列表查询*/
                  getList() {
                    this.dialogVisible=true;
                    xzfcContract(this.HouseDto).then(response => {
                      this.tableData1=response.rows;
                    });
                  },
                  /*跳过*/
                  tiaoguo(){
                    this.activeName="third";
                  },
                  /*附件的上一页*/
                  shang1(){
                    this.activeName="first";
                  },
                  /*附件单的上一页*/
                  shang2(){
                    this.activeName="second";
                  },
                  /*合同信息的下一页*/
                  next1(ShouruleForm){
                    this.$refs[ShouruleForm].validate((valid) => {
                      if (valid) {
                        this.activeName="second";
                        this.scfkjh();
                        alert('submit!');
                      } else {
                        console.log('error submit!!');
                        return false;
                      }
                    });


                  },
                  /*附件的下一页*/
                  next2(formName){

                    this.activeName="third";
                  },
                  handleClick(tab, event) {
                    this.ShouruleForm.premiseName=tab;
                    this.ShouruleForm.houseName=event;
                    this.dialogVisible=false;
                  },
                  handleClose(done) {
                    this.$confirm('确认关闭？')
                      .then(_ => {
                        done();
                      })
                      .catch(_ => {});
                  },
                  /*受否同步业主和签约人*/
                  tongbu(){
                    if (this.checked==true){
                      this.ShouruleForm.signUserName= this.ShouruleForm.ownerName;
                      this.ShouruleForm.signUserIdCard= this.ShouruleForm.ownerIdCard;
                      this.ShouruleForm.signUserMobile= this.ShouruleForm.ownerMobile;
                      this.ShouruleForm.signWithOwner=1;
                    }else {
                      this.ShouruleForm.signWithOwner=0;
                    }

                  },
                  addDate(){
                    const nowDate = new Date();
                    const date = {
                      year: nowDate.getFullYear(),
                      month: nowDate.getMonth() + 1,
                      date: nowDate.getDate(),
                    }
                    const newmonth = date.month>10?date.month:'0'+date.month
                    const day = date.date>10?date.date:'0'+date.date
                    this.updateTime = date.year + '-' + newmonth + '-' + day
                    console.log(this.updateTime)
                  },
                  one(){
                    if(this.ShouruleForm.leaseStartTime==null){
                      this.addDate();
                      this.ShouruleForm.leaseStartTime=this.updateTime;
                    }
                   console.log(this.ShouruleForm.leaseStartTime);
                    const start = new Date();
                    start.setFullYear(start.getFullYear()+1);
                    this.ShouruleForm.leaseEndTime = start;
                  },
                  two(){
                    if(this.ShouruleForm.leaseStartTime==null){
                      this.addDate();
                      this.ShouruleForm.leaseStartTime=this.updateTime;
                    }
                    const start = new Date();
                    start.setFullYear(start.getFullYear()+2);
                    this.ShouruleForm.leaseEndTime = start;
                  },
                  three(){
                    if(this.ShouruleForm.leaseStartTime==null){
                      this.addDate();
                      this.ShouruleForm.leaseStartTime=this.updateTime;
                    }
                    const start = new Date();
                    start.setFullYear(start.getFullYear()+3);
                    this.ShouruleForm.leaseEndTime = start;
                  },
                  four(){
                    if(this.ShouruleForm.leaseStartTime==null){
                      this.addDate();
                      this.ShouruleForm.leaseStartTime=this.updateTime;
                    }
                    const start = new Date();
                    start.setFullYear(start.getFullYear()+4);
                    this.ShouruleForm.leaseEndTime = start;
                  },
                  five(){
                    if(this.ShouruleForm.leaseStartTime==null){
                      this.addDate();
                      this.ShouruleForm.leaseStartTime=this.updateTime;
                    }
                    const start = new Date();
                    start.setFullYear(start.getFullYear()+5);
                    this.ShouruleForm.leaseEndTime = start;
                  },
                  al(id){
                    alert(id)
                  }
            } ,
            mounted() {
            }
        }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
